<template>
  <div id="payPwd">
    <div class="title">
      <span>{{$t('indiv_stock.six_password.56hz4bx0gz00')}}</span>
      <img src="@/assets/img/icon_gb1.png" class="icon" @click="hide(0)" />
    </div>
    <div class="tip">{{ $t('indiv_stock.six_password.56hz4bx0hgk0') }}{{ $t('indiv_stock.six_password.56hz4bx0hkw0') }}</div>
    <input
      ref="pwd"
      title=" "
      type="number"
      maxlength="6"
      :disabled="isInput"
      v-model="password"
      style="position: absolute; z-index: -1; left: -100%; opacity: 0"
    />
    <ul class="pwd-wrap" @click="focus">
      <li><i v-if="passLength > 0"></i></li>
      <li><i v-if="passLength > 1"></i></li>
      <li><i v-if="passLength > 2"></i></li>
      <li><i v-if="passLength > 3"></i></li>
      <li><i v-if="passLength > 4"></i></li>
      <li><i v-if="passLength > 5"></i></li>
    </ul>
    <div class="trader_btn">
      <button class="bt-blue" @click="setTradePwdPC">
        {{ $t("m.determine") }}
      </button>
    </div>
  </div>
</template>

<script>
import {post_tradePwd} from '@/assets/js/API/user.js'
export default {
  data() {
    return {
      password: "", // 交易密码
      passLength: 0, // 密码长度
      name: "", // 公司名字
      lang: "", // 语言
      isInput: false, // 是否开启输入框
    };
  },
  mounted() {
    this.lang = localStorage.getItem("lang") == "en" ? "en" : "zh";
    this.name = JSON.parse(localStorage.getItem("name"));
  },
  methods: {
    hide(val) {
      // val: 0: 取消， 1： 确认
      this.$emit("hidePass", val);
    },
    focus() {
      this.$refs.pwd.focus();
    },
    // 交易密码
    async setTradePwdPC() {
      if (this.password.length < 6)
        return this.$message.warning(this.$i18n.t("m.PasswordQ"));
      let res = await post_tradePwd({ password: this.password});
      if (res.code != 1) {
        this.password = "";
        return this.$message.error(res.msg);
      }
      this.hide(1);
      this.password = "";
    },
  },
  watch: {
    password(curVal, old) {
      // if(/[^\d]/g.test(curVal)){
      //   this.msg = this.msg.replace(/[^\d]/g,''); // 仅能输入数字
      // }else{
      //   this.passLength = curVal.length;
      // }
      if (curVal.length > 6) {
        this.password = old;
      } else {
        this.password = curVal;
        this.passLength = curVal.length;
      }
    },
  },
};
</script>

<style lang="less">
#payPwd {
  background-color: @sideColor;
  height: 200px;
  color: @fff;
  .title {
    font-size: 14px;
    text-align: center;
    padding-top: 10px;
    position: relative;
    .icon {
      position: absolute;
      right: -12px;
      top: -5px;
      width: 14px;
    }
  }
  .tip {
    font-size: 12px;
    color: @fbSix;
    padding: 0 20px 15px 32px;
    text-align: center;
  }
  .pwd-wrap {
    width: 86%;
    height: 40px;
    padding-bottom: 1px;
    // box-sizing: border-box;
    margin: 0 auto;
    background: @LightBorderLine;
    border: 1px solid @Dark_gray;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    cursor: pointer;
    li {
      list-style-type: none;
      text-align: center;
      line-height: 40px;
      width: 40px;
      -webkit-box-flex: 1;
      flex: 1;
      -webkit-flex: 1;
      border-right: 1px solid @Dark_gray;
    }
  }
  .trader_btn {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
}
.pwd-wrap li:last-child {
  border-right: 0;
}
.pwd-wrap li i {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: @fff;
  display: inline-block;
}
</style>